<template>
  <div class="background">
    <el-row>
      <el-col :span="8" :offset="8">
        <el-card class="color" style="border-radius: 5px">
          <div slot="header" class="clearfix">
            <span>登录页面</span>
          </div>
          <div>
            <el-form :label-position="labelPosition" label-width="100px" :model="user" id="form" :rules="rules"
              ref='user'>
              <el-form-item label="用户名" prop="usname">
                <el-input v-model="user.usname"></el-input>
              </el-form-item>
              <el-form-item label="用户密码" prop="uspass">
                <el-input type="password" v-model="user.uspass"></el-input>
              </el-form-item>
              <el-button type="primary" class="but" @click="loginin('user')">登录</el-button>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  let _this;
  export default {
    created() {
      _this = this
    },
    data() {
      return {
        labelPosition: 'right',
        user: {
          usname: null,
          uspass: null,
        },
        rules: {
          usname: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }, ],
          uspass: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      loginin(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.$axios.post(
                "/user/login", {
                  usname: _this.user.usname,
                  uspass: _this.user.uspass
                }
              )
              .then(function(param) {
                console.log("userparam")
                console.log(param)
                localStorage.setItem("usid", param.data.usid);
                localStorage.setItem("token", param.data.token)
                if (param.data != "") {
                  _this.$router.push({
                    path: "/index"
                  })
                }
              })
              .catch(function(err) {
                console.log(err)
              })
          } else {
            this.$alert("请根据要求填写后再进行登录", {
              confirmButtonText: '确定',
            });
            return false;
          }
        });
      },
    },
  }
</script>

<style>
  .background {
    background-color: #5555ff;
    height: 100%;
    width: 100%;
    display: block;
    position: fixed;
  }

  .color {
    border: #FFFFFF solid 1px;
    background-color: #FFFFFF;
    margin-top: 150px;
    width: 85%;
    margin-left: 50px;
  }

  #form {
    padding-right: 30px;
  }

  .but {
    margin-left: 180px;
  }
</style>
